<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单页面</title>
    <style>

        *{margin: 0;padding: 0;}

        .content{

            position: relative;

            width: 100%;

            height: 100%;

            margin: 0 auto;

        }

        .beat{

            position: absolute;

            left:45%;

            top:50%;

            margin-top: -50px;

            margin-left: -50px;

            /*border: red 1px solid;*/
        }
        img{
            width: 100%;
        }
        p{
            text-align: center;
            color: red;
        }

    </style>
</head>
<body>




<div class="content">

    <div class="beat">
        <form action="" method="post" id="form-article-add" >
        <table>
            <tr>
                <td>商品名称:&nbsp</td>
                <td>码农玖付月卡(30元) <input type="hidden" value="1" name="money"></td>
            </tr>
            <tr></tr>
            <tr>
                <td>支付方式:&nbsp</td>
                <td>
                   <input type="radio" checked="checked" name="paytype" value="1" />支付宝
                   <input type="radio" name="paytype" value="2" />微信
                </td>
            </tr>
            <tr>
                <td  colspan="2" style="text-align: center;"><input type="button" id="submit_btn" value="提交"/></td>
            </tr>
        </table>
        </form>
    </div>


</div>
</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    //状态
    var state;
    var timeid;
    $(function(){

        //提交
        $("#submit_btn").click(function () {
            var data=JSON.stringify($('#form-article-add').serializeObject());
            console.log(data);
            $.ajax({
                url:"/submitorder.json",
                type:"POST",
                datatype:"JSON",
                data:data,
                contentType: 'application/json',
                success:function (result) {
                    state=result.result.state;

                    if(state==1){
                        //1为支付宝
                        if(result.result.paytype==1){
                            $(".content").append("<div id=\"chongzhi\" class=\"beat\" style=\"width: 300px; top:20%;\">\n" +
                                "<img src=\"/res/images/zhifubao.jpg\"><p>你需要支付:"+result.result.money+"元</p> </div>");
                        }else{
                            $(".content").append("<div id=\"chongzhi\"class=\"beat\" style=\"width: 300px;top:20%;\">\n" +
                                "<img src=\"/res/images/weixin.jpg\"><p>你需要支付:"+result.result.money+"元</p>   </div>");
                        }
                    }else if(state==1006){
                        alert("订单号重复");
                    }

                },

            });

        });



    });
    function showAuto(){
        if(state!=undefined){
            $.ajax({
                url:"/getorderstate.json",
                type:"POST",
                datatype:"JSON",
                data:"{\"ordernum\":\""+ordernum+"\"}",
                contentType: 'application/json',
                success:function (result) {
                    if (result.result.state==2){
                        clearInterval(timeid);
                        $("#chongzhi").remove();
                        alert("充值成功！");
                    }
                },

            });
        }

    }
</script>
</html>
